<template>
    <div class="loading4">
       <div class="ball">
           <div class="left commom"></div>
           <div class="right commom"></div>
       </div>
    </div>
</template>
<style lang="less" scoped>
.loading4{
    width: 100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .ball{
        width: 50px;
        height: 50px;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .commom{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            opacity: 0.8;
        }
        .left{
            background: #EC1230;
            animation: load1 1.5s linear infinite;
        }
        .right{
            background: #1B50A2;
            animation: load2 1.5s linear infinite;
        }
    }
}
@keyframes load1 {
    0%,100%{
        transform: translateX(0) scale(1);  //正常位置 1
    }
    25%{
        transform: translateX(12px) scale(1.4);//中间  放大
    }
    50%{
        transform: translateX(27px) scale(1);//最右边 还原1
    }
    75%{
        transform: translateX(12px) scale(0.5);// 中间位置 缩小
    }
}
@keyframes load2 {
    0%,100%{
        transform: translateX(0) scale(1); //正常位置 1
    }
    25%{
        transform: translateX(-12px) scale(0.5);//中间  缩小
    }
    50%{
        transform: translateX(-27px) scale(1);//最左边 还原
    }
    75%{
        transform: translateX(-12px) scale(1.4);//中间 放大
    }
}
</style>